<template>
	<div class="col-md-6 col-md-offset-3 register-bg">
		<div class="well bs-component">
		  <form method="POST" action="" class="form-horizontal">
		    <fieldset>
		      <legend class="text-center">注册</legend>
		      <div class="form-group">
		        <div class="col-md-10 col-md-offset-1">
		          <label for="name" class="control-label">用户名</label>
		          <input id="name" type="text" name="name" v-model="user.name" ref="name" placeholder="请输入用户名" required="required" autofocus="autofocus" class="form-control"></div>
		      </div>
		      <div class="form-group">
		        <div class="col-md-10 col-md-offset-1">
		          <label for="email" class="control-label">邮箱地址</label>
		          <input id="email" type="email" name="email" v-model="user.email" ref="email" placeholder="请输入邮箱" required="required" class="form-control"></div>
		      </div>
		      <div class="form-group">
		        <div class="col-md-10 col-md-offset-1">
		          <label for="password" class="control-label">密码</label>
		          <input id="password" type="password" name="password" v-model="user.password" ref="password" placeholder="请输入密码" required="required" class="form-control"></div>
		      </div>
		      <div class="form-group">
		        <div class="col-md-10 col-md-offset-1">
		          <label for="password-confirm" class="control-label">确认密码</label>
		          <input id="password-confirm" type="password" name="password_confirmation" v-model="user.password_confirmation" ref="password_confirmation" placeholder="请输入确认密码" required="required" class="form-control"></div>
		      </div>
		      <div class="form-group">
		        <div class="col-lg-10 col-lg-offset-1">
		          <button type="button" class="btn btn-primary form-control" @click="register">注册</button></div>
		      </div>
		      <div class="form-group">
		        <div class="col-md-8 col-md-offset-2 text-center">
					<router-link class="btn btn-link" to="/login" title="go to login of the website">您已经有账号？点击此处</router-link>
				</div>
		      </div>
		    </fieldset>
		  </form>
		</div>
	</div>
</template>

<script>
	import {mapActions,mapMutations} from 'vuex'
    import {setTitle} from 'common/dom'

	export default {
		data() {
			return {
				user: {
					name: '',
					email: '',
					password: '',
					password_confirmation: ''
				}
			}
		},
		created() {
            setTitle(this.$title.register)
		},
		methods: {
			filterUser() {
				if(this.user.name == '') {
					this.$message('请输入用户名')
					this.$refs.name.focus()
					return false
				}
				if(this.user.name === 'modify') {
					this.$message('用户名不能包含系统关键词')
					this.user.name = ''
					this.$refs.name.focus()
					return false
				}
				if(this.user.email == '') {
					this.$message('请输入邮箱地址')
					this.$refs.email.focus()
					return false
				}
				if(this.user.password == '') {
					this.$message('请输入密码')
					this.$refs.password.focus()
					return false
				}
				if(this.user.password_confirmation == '') {
					this.$message('请输入确认密码')
					this.$refs.password_confirmation.focus()
					return false
				}
				if(this.user.password !== this.user.password_confirmation) {
					this.$message('两次密码输入不相同')
					this.user.password_confirmation = '';
					this.$refs.password_confirmation.focus()
					return false
				}
				return true
			},
			showErrors(errors) {
				for(let error in errors) {
					this.$message(errors[error][0])
					break;
				}
			},
			register() {
				if(!this.filterUser()) {
					return false;
				}
				this.setDataReady(false)
				this.$http.post('/register',this.user).then((response)=>{
					this.setLogin(true)
					let token = response.data.token;
					let user = response.data.user;
					//设置axios请求附带token
					this.$http.defaults.headers.common.Authorization = 'Bearer ' + token.access_token;
					this.saveUser(user)
					this.saveToken(token)
					let _this = this;
					setTimeout(function() {
						_this.$router.push({
		                    path: '/'
		                })
					},350);
				}).catch((error) =>{
				    if (error.response) {
						this.setDataReady(true)
						this.showErrors(error.response.data.errors)
					    // console.log(error.response.status);
					    // console.log(error.response.headers);
				    } else if (error.request) {
					    // The request was made but no response was received
					    // `error.request` is an instance of XMLHttpRequest in the browser and an instance of
					    // http.ClientRequest in node.js
					    console.log(error.request);
				    } else {
				      	// Something happened in setting up the request that triggered an Error
				      	console.log('Error', error.message);
				    }
				    // console.log(error.config);
				})
			},
			...mapActions([
		      'saveUser',
		      'saveToken'
		    ]),
            ...mapMutations({
              setDataReady: 'SET_DATA_READY',
              setLogin: 'SET_LOGIN'
            })
		}
	}
</script>

<style lang="scss" scope>
	.register-bg {
		.well {
			margin-top: 35px;
			background: #fff;
			legend {
				border: none;
			    margin-bottom: 24px;
			    color: #636b6f;
			}
			label {
				line-height: 25px;
			}
			.btn-primary {
				color: #fff;
			    background-color: #34495e;
			    border-color: #32465b;
			}
			.btn-link {
			    color: #34495e;
			    font-weight: 400;
			    border-radius: 0;
			    &:hover {
					color: #19232d;
					text-decoration: none;
				}
			}
		}
	}
</style>